<template>
    <div class='tab2-surface'>
        <div class='tab-item tab-item-title'>Quelle surface habitable</div>
        <div class='tab-item tab-item-content'>
            <v-range-slider
                v-model='surfaceData.range'
                :max='surfaceData.max'
                :min='surfaceData.min'
                class='align-center'
                :thumb-label='"always"'
                :thumb-size='40'
            ></v-range-slider>
            <div class='num-view'>
                <span
                    class='num-view-min'
                >{{(surfaceData.range[0] || 0) + (surfaceData.unit || '')}}</span>
                <span
                    class='num-view-max'
                >{{(surfaceData.range[1] || 0) + (surfaceData.unit || '')}}</span>
            </div>
        </div>
    </div>
</template>


<script>
import { mapState, mapMutations } from 'vuex';
function setUnit(el, sum) {
    el.textContent = sum;
}
export default {
    data() {
        return {
            min: 0,
            max: 100,
            slider: 40,
            range: [10, 70],
            minEl: null,
            maxEl: null,
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        ...mapMutations({
            commitInit: 'searchData/commitInit',
            commitTypeData: 'searchData/commitTypeData',
        }),
        init() {
            const data = this.surfaceData;
            const el = document.querySelector('.tab2-surface').querySelectorAll('.primary--text[role="slider"]');
            this.minEl = el[0].querySelector('.v-slider__thumb-label.primary span');
            this.maxEl = el[1].querySelector('.v-slider__thumb-label.primary span');
            setUnit(this.minEl, data.range[0] + ' m²');
            setUnit(this.maxEl, data.range[1] + ' m²');
            this.minEl.style.fontSize = this.maxEl.style.fontSize = '10px';
            this.minEl.style.fontSize = this.maxEl.style.whiteSpace = 'nowrap';
        },
    },
    computed: {
        ...mapState({
            surfaceData: state => state.searchData.surfaceData,
        }),
    },
    watch: {
        'surfaceData.range'() {
            const data = this.surfaceData;
            let init = true;
            if (data.range[0] !== data.min || data.range[1] !== data.max) {
                init = false;
            }
            this.commitInit({ k: 'surfaceInit', v: init });
            this.commitTypeData({
                k: 'surfaceData',
                data: {
                    range: data.range,
                },
            });
            setUnit(this.minEl, data.range[0] + ' m²');
            setUnit(this.maxEl, data.range[1] + ' m²');
        },
    },
};
</script>


<style lang="scss" scoped>
</style>